<template>
  <div>
    <el-row>
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
            <el-form-item prop="healthState">
              <el-select v-model="filters.healthState" clearable filterable placeholder="健康状态">
                <el-option v-for="item in stateList" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableList" :fit="true" highlight-current-row v-loading="listLoading"
      element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据">
      <el-table-column type="index" label="序号" align="center" width="100px">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="150px" align="center">
      </el-table-column>
      <el-table-column prop="healthState" label="健康状态" width="150px" align="center">
        <template slot-scope="scope">
          <div style="color: red;">
            {{ filterState(scope.row.healthState) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="describes" label="文字描述" width="240px" align="center">
      </el-table-column>
      <el-table-column prop="imageUrl" label="图片描述" width="150px" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.imageUrl" fit="cover" style="width: 150px;" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="voiceUrl" label="语音描述" width="300px" align="center">
        <template slot-scope="scope">
            <audio :src="scope.row.voiceUrl" controls style="width: 260px;"></audio>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="auto" align="center">
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
      layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
  </div>
</template>
<script>
import CustomerApi from '@/api/customer/customer';
export default {
  props: {
    userId: Number | String,
    typeName: String
  },
  data() {
    return {
      dialog: {
        open: false, // 默认隐藏
        title: ""
      },
      new_userId: "",
      loading: false,
      tableList: [],
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20
      },
      filters: {
        healthState: "",
      },
      listLoading: true,
      stateList: [{ id: 1, name: "良好" }, { id: 2, name: "一般" }, { id: 3, name: "不好" }]
    };
  },
  created() {
    this.init();
  },
  watch: {
    userId(newVal, oldVal) {
      this.new_userId = newVal;
      if (this.typeName == 'openCard') {
        this.getData();
      }
    },
    typeName(newVal) {
      if (newVal == 'openCard') {
        this.getData();
      }
    }
  },
  methods: {
    init() {
      this.$Utils.clearData(this.tableList);
    },
    // handleCreate(val) {
    //     // 父组件 调用子组件
    //     this.dialog.open = true; // 显示弹出框
    //     this.dialog.title = "报 警 记 录";
    //     this.equipId = val
    //     this.getData()
    // },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch()
    },
    onSearch() {
      this.listLoading = true;
      this.page.pageNo = 1;
      this.getData();
    },
    getData() {
      var cond = {
        userId: this.new_userId,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        healthState: this.filters.healthState
      };
      this.loading = true;
      CustomerApi.healthUpRecord(cond).then(res => {
        this.page.pageTotal = res.data.total;
        this.tableList = res.data.list;
        this.listLoading = false;
      });
    },
    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.getData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.getData();
    },
  
    filterState(cellValue) {
      if (cellValue === 1) {
        return "良好";
      } else if (cellValue === 2) {
        return "一般";
      } else if (cellValue === 3) {
        return "不好";
      }
    },
   
  }
};
</script>

<style lang="scss" scoped>
.rotate-cartoon {
  animation: cartoon 0.5s linear 0s infinite backwards;
  // -webkit-animation:cartoon .3s linear 0  infinite
}

@keyframes cartoon {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
